<template>
  <!-- 表单 -->
  <div class="page">
    <div class="page-left">
      <div class="page-left-one">欢迎进入！</div>
      <div class="page-left-two">再生资源回收平台管理后台！</div>
      <div class="page-bottom"></div>
    </div>
    <div class="page-right">
      <div class="page-right-title">欢迎登录</div>
      <div class="page-right-form">
        <t-form ref="loginForm" :data="loginForm" label-width="0">
          <!-- 账号密码登录 -->
          <div>
            <t-form-item name="username">
              <t-input
                v-model="loginForm.username"
                size="large"
                placeholder="请输入登录账号"
              >
                <template #prefix-icon>
                  <user-icon />
                </template>
              </t-input>
            </t-form-item>
            <t-form-item name="password">
              <t-input
                v-model="loginForm.password"
                type="password"
                size="large"
                placeholder="请输入密码"
                @keyup.enter.native="onSubmit"
              >
                <template #prefix-icon>
                  <lock-on-icon />
                </template>
              </t-input>
            </t-form-item>
            <t-form-item
              class="dlxx"
              style="margin-left: 50%; transform: translateX(-50%)"
            >
              <div>
                <t-radio-group
                  name="LoginType"
                  v-model="loginForm.LoginType"
                  :options="dlxxList"
                  @change="dlxxChange()"
                ></t-radio-group>
              </div>
            </t-form-item>
          </div>
          <t-form-item>
            <t-button
              @click="loginClick"
              style="margin-top: 30px"
              block
              size="large"
              type="submit"
            >
              登录</t-button
            >
          </t-form-item>
        </t-form>
      </div>
    </div>
  </div>
</template>

<script>
import { UserIcon, LockOnIcon } from "tdesign-icons-vue";
import { login } from "@/pages/index/api/login";
import * as md5 from "@/utils/md5.js";

export default {
  components: { UserIcon, LockOnIcon },
  data() {
    return {
      selectVisible: false,
      dlxxList: [
        {
          value: "01",
          label: "回收企业",
        },
        {
          value: "02",
          label: "管理员",
        },
      ],
      loginForm: {
        LoginType: "01",
        username: "18681257491",
        password: "Abcd1234",
      },
    };
  },

  methods: {
    dlxxChange(val) {
      // this.loginForm.LoginType = val;
    },
    loginClick() {
      // this.$router.push("/pageA");
      this.$router.push("/sqfz/home");

      // login({
      //   Yhdlzh: this.loginForm.username,
      //   Password: md5.md5(this.loginForm.password),
      //   LoginType: this.loginForm.LoginType,
      // }).then((res) => {
      //   console.log(res, "login");
      // });
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.page {
  height: 100vh;
  overflow: hidden;
  background-image: url("~@/assets/newbj.png");
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  &-left {
    margin-top: 10%;
    margin-left: 9%;
    color: white;

    &-one {
      font-size: 40px;
    }
    &-two {
      font-size: 48px;
      margin-top: 24px;
    }
  }
  &-right {
    background-color: white;
    height: 510px;
    margin-top: 10%;
    margin-right: 10%;
    &-title {
      font-size: 36px;
      margin: 16px 0px 35px 35px;
      color: var(--td-text-color-brand);
    }
    &-form {
      width: 410px;
      padding: 0px 30px;
      background-color: white;
      border-radius: 10px;
    }
  }
}
</style>
